const ips = document.querySelectorAll("div.data");

const imgs = document.querySelectorAll(".sidebar div");
imgs.forEach(elem => {
    elem.addEventListener("click", (e) => {
        hiddenAllData()
        openData(elem.id)
    })
})

function hiddenAllData(){
    imgs.forEach(elem => {
        if(elem.classList.contains("active")){
            elem.classList.remove("active")
        }
    })
    ips.forEach(elem => {
        if(!elem.classList.contains("hidden")){
            elem.classList.toggle("hidden")
        }
    }) 
}

function openData(id){
    imgs.forEach(elem => {
        if(elem.id === id){
            elem.classList.toggle("active")
        }
    })
    ips.forEach(elem => {
        if(elem.id === `data-${id}`){
            elem.classList.toggle("hidden")
        }
    }) 
}